<template>
  <div style="padding: 20px;">
    <div>
      <el-card class="box-cardvb">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-form :model="form" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="处置单号" required>
                <el-input v-model="form.code" placeholder="系统自动生成" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处置主题" required>
                <el-input v-model="form.topic" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="申请人">
                <el-input v-model="form.applicant" placeholder="许含斌" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请部门">
                <el-input v-model="form.department" placeholder="生产部门" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="处置方式">
                <el-select v-model="form.disposal" placeholder="请选择" style="width: 498px;">
                  <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in listdtata"
                    :key="item.index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处置日期">
                <el-date-picker v-model="form.date" placeholder="请选择日期" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="处置原因">
                <el-input type="textarea" v-model="form.cause" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <!--设备明细-->
    <div>
      <el-card class="box-card2bn ">
        <div slot="header" class="clearfix">
          <span>设备明细</span>
        </div>
        <div style="margin-bottom: 20px;">
          <el-button type="primary" @click="dialogVisible = true">添加</el-button>
          <el-button type="danger" @click="deleteSelected" style="margin-left: 10px;">移除</el-button>
        </div>
        <el-table ref="registTable" :data="tableData" stripe style="width: 100%;" :cell-style="{ padding: '0px' }"
          :row-style="{ height: '35px' }">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column label="序号" width="60" align="center" fixed>
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center" fixed>
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="removeRow(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="设备编号" width="120" align="center">
          </el-table-column>
          <el-table-column prop="name" label="设备名称" width="120" align="center">
          </el-table-column>
          <el-table-column prop="specifications" label="规格型号" width="120" align="center">
          </el-table-column>
          <el-table-column prop="deviceType" label="设备类型" width="120" align="center">
          </el-table-column>
          <el-table-column prop="brand" label="品牌" width="120" align="center">
          </el-table-column>
          <el-table-column prop="dateofManufacture" label="购置日期" width="120" align="center">
          </el-table-column>
          <el-table-column prop="originalValue" label="采购价格" width="120" align="center">
          </el-table-column>
          <el-table-column prop="useDepartments" label="使用部门" width="120" align="center">
          </el-table-column>
          <el-table-column prop="theEquipment" label="负责人" width="120" align="center">
          </el-table-column>
          <el-table-column prop="storageLocation" label="当前存放位置" width="150" align="center">
          </el-table-column>
          <el-table-column label="处置后存放位置" width="150" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.newLocation" placeholder="请选择">
                <el-option :label="item.depositName" :value="item.depositName" v-for="item in Cunfang"
                  :key="item.index"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="180" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.note" placeholder="请输入" />
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!--子设备选择框-->
      <el-dialog title="选择设备" :visible.sync="dialogVisible" width="60%">
        <div>
          <el-input placeholder="请输入设备编号/名称/规格型号" v-model="searchInput"
            style="width: 20%; margin-right: 10px"></el-input>
          <el-select placeholder="请选择设备类型" v-model="selectedType" style="width: 20%; margin-right: 10px">
            <el-option label="生产设备" value="生产设备"></el-option>
          </el-select>
          <el-select placeholder="请选择使用部门" v-model="selectedDepartment" style="width: 20%; margin-right: 10px">
            <el-option label="生产部门" value="生产部门"></el-option>
          </el-select>
          <el-button type="primary" @click="handleSearch2">查询</el-button>
          <el-button @click="handleReset2">重置</el-button>
        </div>

        <el-table ref="myTable" size="mini" :cell-style="{ padding: '0px' }" :row-style="{ height: '35px' }"
          :data="filteredData" style="width: 100%; margin-top: 20px" stripe @selection-change="handleSelectionChange23">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="eid" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="code" label="设备编号" width="170" align="center"></el-table-column>
          <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
          <el-table-column prop="specifications" label="规格型号" align="center"></el-table-column>
          <el-table-column prop="deviceType" label="设备类型" align="center"></el-table-column>
          <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
          <el-table-column prop="useDepartments" label="使用部门" align="center"></el-table-column>
          <el-table-column prop="storageLocation" label="存放位置" align="center"></el-table-column>
        </el-table>

        <el-pagination background layout="prev, pager, next, sizes, total" :total="total" :page-size.sync="pageSize"
          :current-page.sync="currentPage" @size-change="handlePageChange23" @current-change="handlePageChange2"
          style="margin-top: 20px" />

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm2">确认</el-button>
        </div>
      </el-dialog>
    </div>
    <div style="height: 120px;">
      <el-footer class="footer">
        <el-button @click="handleCancel" style="margin-top: 20px; margin-left: -140px;">关闭</el-button>
        <el-button type="primary" @click="handleConfirm" style="margin-top: 20px; margin-left: 20px;">确认</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script>
import { selectZi, selectLocation } from '@/api/eastjet-maintenance/type/type'
import { listEquipment, listEquipment2 } from '@/api/eastjet-maintenance/sb/sb'
import { InsertEquipmentDisposal } from '@/api/eastjet-maintenance/dao/dao'
export default {
  data() {
    return {
      tableData: [],
      form: {
        code: '',
        topic: '',
        applicant: '许含斌',
        department: '生产部门',
        disposal: '',
        date: '',
        cause: '',
        remark: '',
        tableData: []
      },
      listdtata: [],
      //设备选择字段
      dialogVisible: false,
      searchInput: '',
      selectedType: '',
      selectedDepartment: '',
      multipleSelection23: [],
      filteredData: [],
      currentPage: 1,
      pageSize: 10,
      total: 20,
      //存放位置数据
      Cunfang: []
    };
  },
  created() {
    this.getlist()
  },
  methods: {
    getlist() {
      //字典数据
      selectZi("chu_li").then((res) => {
        this.listdtata = res.data.data;
      });
      //设备数据
      listEquipment("", this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
        this.total = res.data.data.total;
      });
      //存放位置
      selectLocation("").then((res) => {
        console.log("数据", res);
        this.Cunfang = res.data.data;
      });
    },
    handleConfirm2() {
      this.tableData = []
      const selected = this.$refs.myTable.selection;
      for (let i = 0; i < selected.length; i++) {
        this.tableData.push({ ...selected[i], "newLocation": "", "note": "" })
      }
      this.$refs.myTable.clearSelection();
      this.dialogVisible = false;
    },
    //子设备选择分页`
    handlePageChange2(page) {
      this.currentPage = page;
      listEquipment2(this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
      });
    },
    //子设备选择分页
    handlePageChange23(size) {
      this.pageSize = size;
      listEquipment2(this.currentPage, this.pageSize).then((res) => {
        this.filteredData = res.data.data.list;
      });
    },
    //选择设备查询
    handleSearch2() {

    },
    //选择设备重置
    handleReset2() {
      this.searchInput = "";
      this.selectedType = "";
      this.selectedDepartment = "";
    },

    //确认
    handleConfirm() {
      this.form.tableData = this.tableData
      InsertEquipmentDisposal(this.form).then((res) => {
        if (parseInt(res.data.code) == 520) {
          this.$router.go(-1)
        } else {
          this.$notify.error({
            title: '错误',
            message: '这是一条错误的提示消息'
          });
        }
      })
      console.log("查看数据", this.form)
    },
    //确认取消
    handleCancel() {
      this.$router.go(-1)
    },
    removeRow(index) {
      this.tableData.splice(index, 1);
    },
    deleteSelected() {
      // 逻辑待补充
      const selected = this.$refs.registTable.selection;
      this.tableData = this.tableData.filter(item => !selected.includes(item));
      this.dialogVisible = false
    }
  }
};
</script>

<style scoped>
.fixed-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  text-align: center;
  background-color: #eeeded;
  position: fixed;
  bottom: 0;
  z-index: 12;
  width: 100%;
}

.box-cardvb {
  width: 1254px;

  margin-left: 10px;
}

.box-card2bn {
  width: 1254px;
  margin-top: 20px;
  margin-left: 10px;
}
</style>
